<template>
  <view class="album-container">
    <!-- 头部操作 -->
    <view class="header-actions">
      <view class="title">家庭相册</view>
      <button class="create-btn" @click="openModal">创建相册</button>
    </view>

    <!-- 统计信息 -->
    <view class="stats-bar">
      <text class="stat-item">{{ albums.length }}个相册</text>
      <text class="stat-item">{{ totalPhotos }}张照片</text>
    </view>

    <!-- 相册网格 -->
    <scroll-view scroll-y class="albums-grid-container">
      <view class="album-grid" v-if="albums.length > 0">
        <view 
          v-for="album in albums" 
          :key="album.id" 
          class="album-item"
          @click="goToAlbumDetail(album)"
        >
          <image 
            :src="safeImageUrl(album.coverUrl, 'album')" 
            class="album-cover"
            mode="aspectFill"
          />
          <view class="album-info">
            <text class="album-name">{{ album.name }}</text>
            <text class="album-count">{{ album.photoCount || 0 }}张照片</text>
          </view>
        </view>
      </view>
      <!-- 空状态 -->
      <view class="empty-state" v-else>
        <image class="empty-icon" src="/static/相册.png" mode="aspectFit"></image>
        <text class="empty-text">还没有任何相册</text>
        <button class="empty-create-btn" @click="openModal">立即创建第一个相册</button>
      </view>
    </scroll-view>

    <!-- 创建相册弹窗 -->
    <view class="modal-overlay" v-if="showModal" @click.self="closeModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">创建新相册</text>
          <text class="modal-close" @click="closeModal">×</text>
        </view>
        <view class="modal-body" @click.stop>
          <input 
            class="modal-input" 
            v-model="newAlbum.name" 
            placeholder="相册名称 (必填)" 
            @click.stop
            @focus.stop
          />
          <textarea 
            class="modal-textarea" 
            v-model="newAlbum.description" 
            placeholder="相册描述 (可选)"
            @click.stop
            @focus.stop
          ></textarea>
        </view>
        <view class="modal-footer">
          <button class="modal-cancel-btn" @click="closeModal">取消</button>
          <button class="modal-confirm-btn" @click="handleCreateAlbum">创建</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import imageHelper from '@/utils/imageHelper'

export default {
  data() {
    return {
      showModal: false,
      newAlbum: {
        name: '',
        description: '',
      },
    };
  },
  computed: {
    ...mapState('album', ['albums']),
    totalPhotos() {
      return this.albums.reduce((total, album) => total + album.photoCount, 0);
    },
  },
  created() {
    this.fetchAlbums();
  },
  methods: {
    ...mapActions('album', ['fetchAlbums', 'createAlbum']),
    openModal() {
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
      this.newAlbum = { name: '', description: '' };
    },
    async handleCreateAlbum() {
      if (!this.newAlbum.name) {
        uni.showToast({ title: '请输入相册名称', icon: 'none' });
        return;
      }
      try {
        await this.createAlbum(this.newAlbum);
        uni.showToast({ title: '创建成功', icon: 'success' });
        this.closeModal();
        this.fetchAlbums(); // Refresh the list
      } catch (error) {
        uni.showToast({ title: '创建失败', icon: 'none' });
      }
    },
    goToAlbumDetail(album) {
      console.log('goToAlbumDetail called with album:', album);
      console.log('Current albums:', this.albums);
      
      if (!album || !album.id) {
        uni.showToast({ title: '相册信息无效', icon: 'none' });
        return;
      }
      
      uni.navigateTo({
        url: `/pages/album/detail?albumId=${album.id}`
      });
    },
    safeImageUrl(url, type = 'album') {
      return imageHelper.safeImageUrl(url, type);
    },
  },
};
</script>

<style scoped>
.album-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fafafa;
}

.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 24rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.title {
  font-size: 28rpx;
  font-weight: 500;
  color: #1a1a1a;
}

.create-btn {
  background-color: #34495e;
  color: white;
  padding: 8rpx 16rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  border: none;
}

.stats-bar {
  display: flex;
  justify-content: space-around;
  padding: 16rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.stat-item {
  color: #7f8c8d;
  font-size: 24rpx;
}

.albums-grid-container {
  flex: 1;
  padding: 16rpx;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12rpx;
}

.album-item {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  border: 1px solid #f0f0f0;
}

.album-cover {
  width: 100%;
  height: 200rpx;
}

.album-info {
  padding: 16rpx;
}

.album-name {
  font-size: 26rpx;
  font-weight: 500;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #2c3e50;
  margin-bottom: 4rpx;
}

.album-count {
  font-size: 22rpx;
  color: #95a5a6;
}

.empty-state {
  text-align: center;
  padding-top: 160rpx;
}

.empty-icon {
  width: 80rpx;
  height: 80rpx;
  opacity: 0.4;
}

.empty-text {
  font-size: 24rpx;
  color: #95a5a6;
  margin-top: 16rpx;
}

.empty-create-btn {
  margin-top: 32rpx;
  background-color: #34495e;
  color: white;
  border-radius: 8rpx;
  padding: 12rpx 24rpx;
  font-size: 24rpx;
  border: none;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  width: 80%;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.modal-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #1a1a1a;
}

.modal-close {
  font-size: 32rpx;
  color: #95a5a6;
}

.modal-input {
  border: 1px solid #e0e0e0;
  border-radius: 8rpx;
  padding: 16rpx;
  margin-bottom: 16rpx;
  font-size: 24rpx;
}

.modal-textarea {
  border: 1px solid #e0e0e0;
  border-radius: 8rpx;
  padding: 16rpx;
  width: auto;
  height: 120rpx;
  font-size: 24rpx;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 24rpx;
  gap: 12rpx;
}

.modal-cancel-btn {
  background-color: #f8f9fa;
  color: #555555;
  border: 1px solid #e0e0e0;
  border-radius: 6rpx;
  padding: 8rpx 16rpx;
  font-size: 24rpx;
}

.modal-confirm-btn {
  background-color: #34495e;
  color: white;
  border: none;
  border-radius: 6rpx;
  padding: 8rpx 16rpx;
  font-size: 24rpx;
}
</style> 